<template>
  <div class="layout">
    <el-container class="container">
      <!-- 左侧栏 -->
      <el-aside :width="isCollapse ? 'auto' : '200px'">
        <el-menu
          default-active="/home/users"
          background-color="#222832"
          text-color="#fff"
          :router="true"
          :collapse="isCollapse"
          :unique-opened="true"
          :collapse-transition="false"
          @open="handleOpen"
          @close="handleClose"
        >
          <!-- 导航标题  -->
          <div class="head">
            <el-icon v-show="isCollapse"><setting /></el-icon>
            <div v-show="!isCollapse">
              <router-link to="/">
                <span>WEB面试宝典</span>
              </router-link>
            </div>
          </div>
          <div class="line"></div>
          <!-- 侧边栏 -->
          <el-sub-menu index="1">
            <template #title>
              <el-icon><location /></el-icon>
              <span>欢迎使用</span>
            </template>

            <el-menu-item index="/home/dashboard">
              <el-icon><location /></el-icon>
              <span>数据面板</span>
            </el-menu-item>
            <el-menu-item index="/home/publish">
              <el-icon><location /></el-icon>
              <span>发布文章</span>
            </el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="2">
            <template #title>
              <el-icon><document /></el-icon>
              <span>首页管理</span>
            </template>

            <el-menu-item index="/home/banner">
              <el-icon><location /></el-icon>
              <span>轮播配置</span>
            </el-menu-item>
            <el-menu-item index="/home/notice">
              <el-icon><location /></el-icon>
              <span>广告配置</span>
            </el-menu-item>
            <el-menu-item index="/home/questionbank">
              <el-icon><location /></el-icon>
              <span>题库分类</span>
            </el-menu-item>
            <el-menu-item index="/home/tool">
              <el-icon><location /></el-icon>
              <span>辅助工具</span>
            </el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="3">
            <template #title>
              <el-icon><document /></el-icon>
              <span>题库管理</span>
            </template>

            <el-menu-item index="/home/classify">
              <el-icon><location /></el-icon>
              <span>面试讲解</span>
            </el-menu-item>
            <el-menu-item index="/home/classification">
              <el-icon><location /></el-icon>
              <span>题库列表</span>
            </el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="4">
            <template #title>
              <el-icon><setting /></el-icon>
              <span>系统管理</span>
            </template>

            <el-menu-item index="/home/users">
              <el-icon><location /></el-icon>
              <span>管理员配置</span>
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-container class="content">
        <!-- 头部组件 -->
        <Header @changeIsCollapse="getIsCollapse" />
        <!-- 右侧栏 -->
        <el-main>
          <!-- 组件的出口 -->
          <router-view></router-view>
        </el-main>
        <!-- 尾部组件 -->
        <Footer />
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref } from "vue";
import Header from "../components/Header.vue";
import Footer from "../components/Footer.vue";
// 定义左侧栏收缩
let isCollapse = ref(false);
// 左侧栏的字体图标
// import {
//   Document,
//   Menu as IconMenu,
//   Location,
//   Setting,
// } from "@element-plus/icons-vue";
// 左侧栏展开收缩事件
const handleOpen = (key, keyPath) => {
  // console.log(key, keyPath);
};
const handleClose = (key, keyPath) => {
  // console.log(key, keyPath);
};
// 更新左侧收缩栏
const getIsCollapse = (bol) => {
  isCollapse.value = bol;
};
</script>

<style scoped>
.layout {
  min-height: 100vh;
  background-color: #ffffff;
  display: flex;
}
.container {
  height: 100vh;
}
.aside {
  /* width: 200px !important; */
  /* background-color: #222832; */
  /* overflow: hidden;
  overflow-y: auto;
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none; */
}
.aside::-webkit-scrollbar {
  display: none;
}
.head {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background-color: #222832;
  color: #fff;
}
.head > div {
  display: flex;
  align-items: center;
}

.head img {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}
.head span {
  font-size: 20px;
  color: #ffffff;
}
.line {
  border-top: 1px solid hsla(0, 0%, 100%, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.content {
  display: flex;
  flex-direction: column;
  max-height: 100vh;
  overflow: hidden;
}
.main {
  height: calc(100vh - 100px);
  overflow: auto;
  padding: 10px;
}
</style>
<style>
body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.el-aside {
  /* width: auto; */
  height: 100vh;
  background-color: #222832;
}
.el-menu {
  border-right: none !important;
}
.el-submenu {
  border-top: 1px solid hsla(0, 0%, 100%, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.el-submenu:first-child {
  border-top: none;
}
.el-submenu [class^="el-icon-"] {
  vertical-align: -1px !important;
}
a {
  color: #409eff;
  text-decoration: none;
}
.el-pagination {
  text-align: center;
  margin-top: 20px;
}
.el-popper__arrow {
  display: none;
}
</style>
